<template>
  <div style="width:100%;">
    <bcd-top title="购物车" englishtitle="SHOPCART" />

    <template>
      <div class="shopcart_main">
        <div class="shopcart_top" :style="$store.getters.screenWidth ? 'padding:3px;' : ''">
          <!-- <div style="font-size:16px;text-align:left;padding-left:30px;margin-bottom:20px">优惠</div> -->

          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%;"
            border
            @selection-change="getSelectChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="商品">
              <template slot-scope="scope">
                <div>{{scope.row.product && scope.row.product.storeName}}</div>
              </template>
            </el-table-column>
            <el-table-column label="图片">
              <template slot-scope="scope">
                <img
                  style="width:80px;height:50px"
                  :style="$store.getters.screenWidth ? 'width:50px;' : ''"
                  :src="scope.row.product && scope.row.product.image"
                  alt
                />
              </template>
            </el-table-column>
            <el-table-column label="规格"  v-if="!$store.getters.screenWidth">
              <template
                slot-scope="scope"
              >{{scope.row.specObj ? scope.row.specObj.attrs[0].values.join(',') : '暂无'}}</template>
            </el-table-column>
            <el-table-column v-if="!$store.getters.screenWidth" label="单价">
              <template
                slot-scope="scope"
              >{{scope.row.product && (scope.row.specObj ? scope.row.specObj.attrs[0].price : scope.row.product.price) }}元</template>
            </el-table-column>
            <el-table-column v-if="!$store.getters.screenWidth" label="数量">
              <template slot-scope="scope">
                <div>{{scope.row.cartNum}}</div>
              </template>
            </el-table-column>
            <el-table-column label="小计">
              <template
                slot-scope="scope"
              >{{ Number(scope.row.product && (scope.row.specObj ? scope.row.specObj.attrs[0].price : scope.row.product.price) )*Number((scope.row.specObj ? scope.row.specObj.attrs[0].price : scope.row.product.price) && scope.row.cartNum) }}元</template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-popconfirm
                  :title="'确认将'+scope.row.product && scope.row.product.storeName+'移除购物车吗?'"
                  @confirm="deleteGoods(scope.row.id)"
                >
                  <el-button slot="reference" type="text">删除</el-button>
                </el-popconfirm>
                <!-- <el-button style="margin-left:5px" type="text" @click="orderGeter(scope.row)">结算</el-button> -->
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="暂无数据"></el-empty>
            </template>
          </el-table>
          <div style="text-align:right;margin-right:10px" v-if="tableData.length>0">
            <el-button
              type="primary"
              style="margin-top:10px;margin-bottom:30px"
              @click="goToBuy"
            >立即结算</el-button>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
         
<script>
import bcdTop from "../components/bcdTop";
import {
  cartList,
  deleteCart,
  cartNumplus,
  orderAdd,
  addressList
} from "../api/api";
export default {
  data() {
    return {
      num: 1,
      tableData: [],
      queryList: []
    };
  },
  components: {
    bcdTop
  },
  created() {
    this.getCartList();
  },
  methods: {
    getSelectChange(value) {
      this.queryList = value;
    },
    async goToBuy() {
      if (this.queryList.length == 0) {
        this.$notify({
          title: "请勾选购物车商品",
          type: "error"
        });
        return;
      }

      this.$router.push({
        path: "/pay",
        query: { paArr: JSON.stringify(this.queryList) }
      });
    },
    handleSelectionChange() {},
    async deleteGoods(id) {
      console.log("111111111");
      await deleteCart({
        cartId: id
      });
      this.$notify.success({
        title: "成功",
        message: "商品删除成功！"
      });
      this.$bus.$emit("updataCart");
      this.getCartList();
    },
    async orderGeter(row) {
      const { data } = await addressList({
        uid: this.$store.getters["userId"]
      });
      //判断是否有地址
      if (data.length == 0) {
        setTimeout(() => {
          this.$notify({
            title: "请先添加收货地址",
            type: "error"
          });
          this.isLoading = false;
          this.$router.push("/address");
        }, 500);
        return;
      }
      let p = [];
      p.push(row);
      this.$router.push({
        path: "/pay",
        query: { paArr: p }
      });
      // this.$router.push({
      //   path: "/pay",
      //   query: { id: row.product.id, num: row.cartNum, cartIds: row.id }
      // });
    },
    async handleChange(val, id) {
      console.log("va'''", val, id);
      await cartNumplus({ cartId: id, handNum: 0, num: val });
    },
    async getCartList() {
      const { data } = await cartList({
        uid: this.$store.getters["userId"]
      });
      this.tableData = data;
      console.log("datat", data);
    },
    toDetail(item) {
      this.$router.push({
        path: "/productDetail",
        query: { userId: item.product.id }
      });
    }
  }
};
</script>
<style lang='scss'>
::v-deep .el-popconfirm__main {
  padding: 15px !important kkjjkklkl;
}
.shopcart_main {
  width: 100%;
  background-color: #f2f2f2;
  // padding: 20px;
  box-sizing: border-box;
}
.shopcart_top {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  background: #fff;
}

.bacColor {
  background-color: #fff;
  width: 100%;
  .bacUtem {
    border: 1px solid #eee;
    min-height: 120px;
    overflow: hidden;
    width: 100%;
    padding: 5% 7%;
    box-sizing: border-box;
    display: flex;
    .bactitle {
      font-size: 14px;
      max-height: 36px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      text-align: left;
    }
    .bacNum {
      display: flex;
      justify-content: flex-start;
      margin-top: 10px;
      font-size: 14px;
    }
    .bacButton {
      display: flex;
      align-items: center;
      margin-top: 10px;
      justify-content: space-between;
      font-size: 14px;
    }
  }
}
</style>